<template>
  <div class="dashboard">
    <!-- 用户信息卡片 -->
    <div class="user-profile-card">
      <div class="profile-header">
        <el-avatar :size="80" :src="userInfo.avatar">
          {{ userInfo.name?.charAt(0) }}
        </el-avatar>
        <div class="profile-info">
          <h2>{{ userInfo.name }}</h2>
          <p class="role-info">
            <el-tag :type="getRoleTagType(userInfo.role)" size="large">
              {{ getRoleName(userInfo.role) }}
            </el-tag>
            <span class="campus-info">{{ userInfo.campus }}</span>
          </p>
          <p class="contact-info">
            <el-icon><Phone /></el-icon>
            {{ userInfo.phone }}
            <el-icon style="margin-left: 16px;"><Message /></el-icon>
            {{ userInfo.email }}
          </p>
        </div>
        <div class="profile-actions" v-if="userInfo.role === 'student' || userInfo.role === 'coach'">
          <!-- 学员余额 -->
          <div class="balance-card" v-if="userInfo.role === 'student'">
            <div class="balance-amount">¥{{ userInfo.balance || 0 }}</div>
            <div class="balance-label">账户余额</div>
            <el-button type="primary" size="small" @click="goToRecharge">充值</el-button>
          </div>
          <!-- 教练等级 -->
          <div class="level-card" v-if="userInfo.role === 'coach'">
            <div class="level-name">{{ getLevelName(userInfo.level) }}</div>
            <div class="level-rate">¥{{ getLevelRate(userInfo.level) }}/小时</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <!-- 超级管理员统计 -->
      <template v-if="userInfo.role === 'super_admin'">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">5</div>
            <div class="stat-label">校区总数</div>
          </div>
          <el-icon class="stat-icon"><OfficeBuilding /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">1,234</div>
            <div class="stat-label">用户总数</div>
          </div>
          <el-icon class="stat-icon"><User /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">¥45,678</div>
            <div class="stat-label">本月收入</div>
          </div>
          <el-icon class="stat-icon"><Wallet /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">正常</div>
            <div class="stat-label">许可状态</div>
          </div>
          <el-icon class="stat-icon"><Key /></el-icon>
        </el-card>
      </template>

      <!-- 校区管理员统计 -->
      <template v-else-if="userInfo.role === 'campus_admin'">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">3</div>
            <div class="stat-label">待审核教练</div>
          </div>
          <el-icon class="stat-icon"><UserFilled /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">156</div>
            <div class="stat-label">学员总数</div>
          </div>
          <el-icon class="stat-icon"><User /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">24</div>
            <div class="stat-label">今日预约</div>
          </div>
          <el-icon class="stat-icon"><Calendar /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">15</div>
            <div class="stat-label">月赛报名</div>
          </div>
          <el-icon class="stat-icon"><Trophy /></el-icon>
        </el-card>
      </template>

      <!-- 学员统计 -->
      <template v-else-if="userInfo.role === 'student'">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">2</div>
            <div class="stat-label">我的教练</div>
          </div>
          <el-icon class="stat-icon"><UserFilled /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">45</div>
            <div class="stat-label">累计课程</div>
          </div>
          <el-icon class="stat-icon"><Calendar /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">8</div>
            <div class="stat-label">本月课程</div>
          </div>
          <el-icon class="stat-icon"><Clock /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">4.8</div>
            <div class="stat-label">平均评分</div>
          </div>
          <el-icon class="stat-icon"><StarFilled /></el-icon>
        </el-card>
      </template>

      <!-- 教练统计 -->
      <template v-else-if="userInfo.role === 'coach'">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">15</div>
            <div class="stat-label">指导学员</div>
          </div>
          <el-icon class="stat-icon"><User /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">¥2,400</div>
            <div class="stat-label">本月收入</div>
          </div>
          <el-icon class="stat-icon"><Wallet /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">16</div>
            <div class="stat-label">本月课时</div>
          </div>
          <el-icon class="stat-icon"><Clock /></el-icon>
        </el-card>
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number">4.6</div>
            <div class="stat-label">学员评分</div>
          </div>
          <el-icon class="stat-icon"><StarFilled /></el-icon>
        </el-card>
      </template>
    </div>

    <!-- 内容区域 -->
    <div class="dashboard-content">
      <div class="left-content">
        <!-- 快速操作 -->
        <el-card class="quick-actions-card">
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <template v-if="userInfo.role === 'super_admin'">
              <el-button type="primary" @click="$router.push('/campus/create')">
                <el-icon><Plus /></el-icon>
                新建校区
              </el-button>
              <el-button @click="$router.push('/license')">
                <el-icon><Key /></el-icon>
                许可管理
              </el-button>
            </template>
            <template v-else-if="userInfo.role === 'campus_admin'">
              <el-button type="primary" @click="$router.push('/users/coaches')">
                <el-icon><UserFilled /></el-icon>
                审核教练
              </el-button>
              <el-button @click="$router.push('/competition/manage')">
                <el-icon><Trophy /></el-icon>
                月赛管理
              </el-button>
            </template>
            <template v-else-if="userInfo.role === 'student'">
              <el-button type="primary" @click="$router.push('/coaches/search')">
                <el-icon><Search /></el-icon>
                查找教练
              </el-button>
              <el-button @click="$router.push('/booking/calendar')">
                <el-icon><Calendar /></el-icon>
                预约课程
              </el-button>
              <el-button @click="$router.push('/competition/enroll')">
                <el-icon><Trophy /></el-icon>
                月赛报名
              </el-button>
            </template>
            <template v-else-if="userInfo.role === 'coach'">
              <el-button type="primary" @click="$router.push('/users/my-students')">
                <el-icon><User /></el-icon>
                我的学员
              </el-button>
              <el-button @click="$router.push('/booking/my-schedule')">
                <el-icon><Calendar /></el-icon>
                我的课表
              </el-button>
            </template>
          </div>
        </el-card>

        <!-- 最近活动 -->
        <el-card class="recent-activities-card">
          <template #header>
            <span>最近活动</span>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :timestamp="activity.time"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>

      <div class="right-content">
        <!-- 待办事项 -->
        <el-card class="todo-card">
          <template #header>
            <span>待办事项</span>
          </template>
          <div class="todo-list">
            <div 
              v-for="todo in todoList" 
              :key="todo.id" 
              class="todo-item"
              :class="{ completed: todo.completed }"
            >
              <el-checkbox v-model="todo.completed">
                {{ todo.title }}
              </el-checkbox>
              <span class="todo-time">{{ todo.time }}</span>
            </div>
          </div>
        </el-card>

        <!-- 系统通知 -->
        <el-card class="notifications-card">
          <template #header>
            <span>系统通知</span>
          </template>
          <div class="notification-list">
            <div 
              v-for="notification in notifications" 
              :key="notification.id"
              class="notification-item"
            >
              <el-icon class="notification-icon" :class="notification.type">
                <Bell v-if="notification.type === 'info'" />
                <SuccessFilled v-if="notification.type === 'success'" />
                <WarningFilled v-if="notification.type === 'warning'" />
              </el-icon>
              <div class="notification-content">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-time">{{ notification.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import {
  User, UserFilled, Calendar, Trophy, Wallet, Key, OfficeBuilding,
  Phone, Message, Clock, StarFilled, Plus, Search, Bell,
  SuccessFilled, WarningFilled
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()

const userInfo = computed(() => userStore.userInfo)

// 获取角色名称
const getRoleName = (role: string) => {
  const roleMap: Record<string, string> = {
    'super_admin': '超级管理员',
    'campus_admin': '校区管理员',
    'student': '学员',
    'coach': '教练'
  }
  return roleMap[role] || '用户'
}

// 获取角色标签类型
const getRoleTagType = (role: string) => {
  const typeMap: Record<string, string> = {
    'super_admin': 'danger',
    'campus_admin': 'warning',
    'student': 'primary',
    'coach': 'success'
  }
  return typeMap[role] || 'info'
}

// 获取教练等级名称
const getLevelName = (level?: string) => {
  const levelMap: Record<string, string> = {
    'senior': '高级教练',
    'middle': '中级教练',
    'junior': '初级教练'
  }
  return levelMap[level || 'middle'] || '中级教练'
}

// 获取教练等级费率
const getLevelRate = (level?: string) => {
  const rateMap: Record<string, number> = {
    'senior': 200,
    'middle': 150,
    'junior': 80
  }
  return rateMap[level || 'middle'] || 150
}

// 跳转到充值页面
const goToRecharge = () => {
  router.push('/finance/recharge')
}

// 最近活动数据
const recentActivities = [
  {
    id: 1,
    content: '成功预约了李教练的课程',
    time: '2小时前',
    type: 'primary'
  },
  {
    id: 2,
    content: '完成了训练评价',
    time: '1天前',
    type: 'success'
  },
  {
    id: 3,
    content: '账户充值 ¥200',
    time: '2天前',
    type: 'info'
  }
]

// 待办事项数据
const todoList = [
  {
    id: 1,
    title: '完成今天的训练课程',
    time: '15:00',
    completed: false
  },
  {
    id: 2,
    title: '提交课程评价',
    time: '16:00',
    completed: false
  },
  {
    id: 3,
    title: '查看月赛安排',
    time: '今天',
    completed: true
  }
]

// 系统通知数据
const notifications = [
  {
    id: 1,
    title: '预约确认通知',
    time: '刚刚',
    type: 'success'
  },
  {
    id: 2,
    title: '月赛报名开始',
    time: '1小时前',
    type: 'info'
  },
  {
    id: 3,
    title: '余额不足提醒',
    time: '2小时前',
    type: 'warning'
  }
]

onMounted(() => {
  // 页面加载时的初始化操作
})
</script>

<style scoped lang="scss">
.dashboard {
  padding: 0;
}

.user-profile-card {
  background: linear-gradient(135deg, #ff7700, #ffa64d);
  color: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;

  .profile-header {
    display: flex;
    align-items: center;
    gap: 24px;

    .profile-info {
      flex: 1;

      h2 {
        margin: 0 0 8px 0;
        font-size: 24px;
      }

      .role-info {
        margin: 8px 0;
        display: flex;
        align-items: center;
        gap: 12px;

        .campus-info {
          opacity: 0.9;
        }
      }

      .contact-info {
        margin: 0;
        opacity: 0.9;
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }

    .profile-actions {
      .balance-card, .level-card {
        background: rgba(255, 255, 255, 0.1);
        padding: 16px;
        border-radius: 8px;
        text-align: center;
        min-width: 120px;

        .balance-amount, .level-name {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        .balance-label, .level-rate {
          font-size: 12px;
          opacity: 0.8;
          margin-bottom: 8px;
        }
      }
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;

  .stat-card {
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
    }

    .stat-content {
      .stat-number {
        font-size: 24px;
        font-weight: bold;
        color: #ff7700;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 14px;
        color: #6b7280;
      }
    }

    .stat-icon {
      font-size: 32px;
      color: #d1d5db;
    }
  }
}

.dashboard-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;

  .left-content, .right-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .quick-actions-card {
    .quick-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
  }

  .recent-activities-card {
    :deep(.el-timeline-item__content) {
      font-size: 14px;
    }
  }

  .todo-card {
    .todo-list {
      .todo-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        &.completed {
          opacity: 0.6;

          :deep(.el-checkbox__label) {
            text-decoration: line-through;
          }
        }

        .todo-time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  .notifications-card {
    .notification-list {
      .notification-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .notification-icon {
          font-size: 20px;

          &.success {
            color: #67c23a;
          }

          &.info {
            color: #409eff;
          }

          &.warning {
            color: #e6a23c;
          }
        }

        .notification-content {
          flex: 1;

          .notification-title {
            font-size: 14px;
            margin-bottom: 4px;
          }

          .notification-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .user-profile-card .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-actions {
    flex-direction: column;

    .el-button {
      width: 100%;
    }
  }
}
</style>
